<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="placeholder.js"></script>

<body>
  <div style="height:10000px;"></div>
  <img id="no_attribute_img" src='../loading/resources/base-image1.png'>
  <img id="auto_attribute_img" src='../loading/resources/base-image2.png' loading="auto">
  <img id="invalid_attribute_img" src='../loading/resources/base-image3.png' loading="invalid-value-default">
  <img id="lazy_attribute_img" src='../loading/resources/dup-image1.png' loading="lazy">
  <img id="eager_attribute_img" src='../loading/resources/dup-image2.png' loading="eager">
</body>

<script>
  var no_attribute_img = document.getElementById("no_attribute_img");
  var auto_attribute_img = document.getElementById("auto_attribute_img");
  var invalid_attribute_img = document.getElementById("invalid_attribute_img");
  var lazy_attribute_img = document.getElementById("lazy_attribute_img");
  var eager_attribute_img = document.getElementById("eager_attribute_img");

  async_test(function(t) {
    window.addEventListener("load", t.step_func_done());
  }, "Test that document load event is fired");

  async_test(function(t) {
    window.addEventListener("load", t.step_func_done(function() {
      assert_false(is_image_fully_loaded(lazy_attribute_img));
      assert_false(is_image_fully_loaded(no_attribute_img));
    }));
    lazy_attribute_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with loading=lazy"));
    auto_attribute_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with loading=auto"));
    no_attribute_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with no loading attribute"));
    invalid_attribute_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with invalid loading attribute"));
  }, "Test that <img> with loading=lazy or auto or no attribute or invalid value are loaded as a placeholder");

  async_test(function(t) {
    eager_attribute_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(eager_attribute_img));
      }));
  }, "Test that <img> with loading=eager is fully loaded, and not a placeholder");

  async_test(function(t) {
    var complete = 0;
    var onload_callback = function() {
      if (++complete == 4) {
        // The four images with loading=lazy,auto or default or invalid attribute are loaded.
        assert_true(is_image_fully_loaded(no_attribute_img));
        assert_true(is_image_fully_loaded(lazy_attribute_img));
        assert_true(is_image_fully_loaded(auto_attribute_img));
        assert_true(is_image_fully_loaded(invalid_attribute_img));
        t.done();
      }
      assert_equals("eager", this.getAttribute('loading'));
    };
    no_attribute_img.addEventListener("load", onload_callback);
    lazy_attribute_img.addEventListener("load", onload_callback);
    auto_attribute_img.addEventListener("load", onload_callback);
    invalid_attribute_img.addEventListener("load", onload_callback);
    window.addEventListener("load", t.step_func(function() {
      assert_equals(null, no_attribute_img.getAttribute('loading'));
      assert_equals("lazy", lazy_attribute_img.getAttribute('loading'));
      assert_equals("auto", auto_attribute_img.getAttribute('loading'));
      assert_equals("invalid-value-default", invalid_attribute_img.getAttribute('loading'));
      no_attribute_img.setAttribute('loading', 'eager');
      lazy_attribute_img.setAttribute('loading', 'eager');
      auto_attribute_img.setAttribute('loading', 'eager');
      invalid_attribute_img.setAttribute('loading', 'eager');
    }));
  }, "Test that deferred <img> are fully loaded when lazyload is turned off");
</script>
